<template>
  <the-header/>
  <a-layout-content
      :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
  <div>
    <div class="table-operations">

      <a-space direction="horizontal">
        <a-date-picker v-model:value="timeValue" />
        <a-button @click="search" type="primary">查询</a-button>
        <a-button @click="setTime" type="primary">导出</a-button>
        <a-button @click="exception" type="danger">显示异常</a-button>
      </a-space>

      <a-button class="logout-menu" @click="download">导出未打卡学生</a-button>
    </div>

    <a-table :columns="columns" :data-source="users" @change="handleChange" />
  </div>
  </a-layout-content>
  <the-footer/>
</template>
<script lang="ts">
import {computed, defineComponent, onMounted, reactive, ref, UnwrapRef} from 'vue';
import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
import theFooter from "@/components/the-footer.vue";
import theHeader from "@/components/the-header.vue";
import axios from 'axios';
import {message} from "ant-design-vue";
import router from "@/router";
import { Moment } from 'moment';
import moment from 'moment';


type Pagination = TableState['pagination'];

export default defineComponent({
  setup() {
    const users = ref();
    const filteredInfo = ref();
    const sortedInfo = ref();
    const columns = computed(() => {
      const filtered = filteredInfo.value || {};
      const sorted = sortedInfo.value || {};
      return [
        {
          title: '姓名',
          dataIndex: 'username',
          key: 'username',

        },
        {
          title: '学号',
          dataIndex: 'loginId',
          key: 'loginId',
          sorter:(a:any,b:any)=>a.loginId - b.loginId,
          sortOrder: sorted.columnKey ==='loginId' && sorted.order

        },
        {
          title: '日期',
          dataIndex: 'clockTimeStr',
          key: 'clockTimeStr',
          sorter:(a:any,b:any)=>{
            let aTime = new Date(a.clockTimeStr).getTime();
            let bTime = new Date(b.clockTimeStr).getTime();
            return aTime - bTime;
          },
          sortOrder: sorted.columnKey ==='clockTimeStr' && sorted.order
        },
        {
          title: '身份证号',
          dataIndex: 'identityNumber',
          key:'identityNumber',
        },
        {
          title:'手机号',
          dataIndex: 'phone',
          key:'phone'
        },
        {
          title:'体温',
          dataIndex: 'temperature',
          key:'temperature',
          sorter:(a:any,b:any)=>a.temperature - b.temperature,
          sortOrder: sorted.columnKey ==='temperature' && sorted.order
        },
        {
          title: '状态',
          dataIndex:'state',
          key:'state'
        }
      ];
    });
    const timeValue = ref<Moment>();
    onMounted(()=>{
      axios({
        url:'/api/clock/all',
        method:'get',
      }).then(
          (response)=>{
            if(response.data.errorCode == 2001){
              message.error("用户未登录")
              router.push("/login")
            }else if(response.data.errorCode == 3001){
              message.error("用户没有权限")
              router.push("/login")
            }
            else {
              //console.log("response", response.data);
              users.value = response.data;
              //console.log("users", users.value)
            }

          }
      )
    })

    const handleChange = (pagination: Pagination, filters: TableStateFilters, sorter: any) => {
     // console.log('Various parameters', pagination, filters, sorter);
      filteredInfo.value = filters;
      sortedInfo.value = sorter;
    };


    //导出指定日期的打卡信息表
    const setTime = ()=>{
          //console.log("时间",timeValue.value);
          const date = moment(timeValue.value).format('YYYY-MM-DD');
          //console.log("转化后时间,",date);
          window.location.href="http://47.106.198.41:8080/excel/e/"+date;



    }


    //根据日期查询
    const search =()=>{
      const date = moment(timeValue.value).format('YYYY-MM-DD');
      axios(
          {
            url:'/api/clock/getForm',
            method:'get',
            params:{
              date:date
            }
          }
      ).then(
          (response)=>{
            //console.log("response",response)
            users.value = response.data;
          }
      )
    }


    //导出今日未打卡的学生信息表
    const download =()=>{
      window.location.href="http://47.106.198.41:8080/excel/ee";
    }
    //显示当日异常
    const exception =()=>{
      const date = moment(timeValue.value).format('YYYY-MM-DD');
       axios(
           {
             url:'/api/clock/exception',
             method:'get',
             params:{
               date:date
             }
           }
       ).then(
           (response)=>{
             //console.log(response);
             users.value = response.data;
           }
       )
    }

    const clearFilters = () => {
      filteredInfo.value = null;
    };
    const clearAll = () => {
      filteredInfo.value = null;
      sortedInfo.value = null;
    };
    const setAgeSort = () => {
      sortedInfo.value = {
        order: 'descend',
        columnKey: 'loginId',
      };
    };

    return {
      columns,
      handleChange,
      clearFilters,
      clearAll,
      setAgeSort,
      users,
      setTime,
      timeValue,
      search,
      download,
      exception

    };
  },
  components: {
    theFooter,
    theHeader,
  },
});
</script>
<style scoped>
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}

.logout-menu{
  float:right;
  color: black;
}
</style>
